<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="search"></u-search>
            </view>
        </view>

        <scroll-view v-if="list.length > 0" class="list" :scroll-y="true" :scroll-top="top" :refresher-triggered="triggered" :refresher-enabled="true" :lower-threshold="100" @refresherrefresh="onRefresh" @scrolltolower="onBottom" @scroll="onScroll" :style="{height: `${height}px`}">
            <navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="(item,key) in list" :key="key">
                <view class="title">{{item.products.name}}</view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">{{item.query_num}}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value">{{item.query_code}}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">{{item.query_time_text}}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            小程序码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </navigator>
            
            <u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />
        </scroll-view>

        <!-- 提醒组件 -->
        <u-toast ref="notice" />

        <!-- 返回顶部 -->
        <u-back-top :scroll-top="top" @click="BackTop"></u-back-top>
    </view>
</template>
<script>
    export default {
        onShow()
        {
            //获取本地存储
            var business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

            // 判断对象是否为空
            if(Object.getOwnPropertyNames(business).length > 0)
            {
                this.business = business
                this.onRefresh()
            }else
            {
                //没有登录
                uni.$u.route({
                    type: 'reLaunch',
                    url: '/pages/validate/validate'
                })
                return false
            }
        },
        onReady()
        {
            //调用uni接口 获取页面的高度
            uni.getSystemInfo({
                success: (res) => 
                {
                    this.height = res.windowHeight
                }
            })
        },
        data() {
            return {
                triggered:false,// 下拉刷新状态
                Isfreshing: false, //防止重复刷新
                list:[],
                page:1,
                business:{},
                status:'loadmore',
                keyword:'',
                height: 0, //页面高度
                top: 0,
            }
        },
        methods:{
            search()
            {
                this.onRefresh()
            },
            BackTop() //返回顶部
            {
                this.top = 0
            },
            onScroll(e) //监听页面滚动
            {
                this.top = e.detail.scrollTop
            },
            onRefresh() //下拉刷新
            {
                //防止重复下拉刷新
                if(this.Isfreshing) return;

                //执行一次下拉刷新
                this.Isfreshing = true

                //判断是否处于下拉刷新中
                if(!this.triggered) this.triggered = true //正在下拉刷新中

                this.page = 1
                this.list = []

                //请求数据
                this.ProductData()
            },
            onBottom() //上拉加载
            {
                this.ProductData()
            },
            async ProductData() //数据请求
            {
                var params = {
                    busid: this.business.id,
                    page: this.page,
                    keyword:this.keyword
                }

                //请求中
                var result = await uni.$u.http.post('/business/product', params)

                if(this.triggered) this.triggered = false
                if(this.Isfreshing) this.Isfreshing = false
                this.status = 'loadmore'

                if(result.code == 0)
                {
                    //没有更多数据
                    this.status = 'nomore'
                    return false
                }

                this.list = this.list.concat(result.data)
                this.page++
            }
        }
    }
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>